<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id="root">
	<p>
		{{message}}
	</p>
</div>
<script>
	/**
	 * Vue 把双向绑定称作 reactive，可以翻译为响应式数据绑定。内部是通过 ES5 定义的 
	 * getter 和 setter 方法实现的，所以不支持 IE8 
	 * 及以下浏览器，这种实现方式有两个容易犯错的地方：
	 * •如果在 data 上直接添加和删除属性是无法被检测到的，一般删除是不会的，但是可能
	 * 会动态添加，这个时候应该通过 vm.$set(“name”, value) 的方式来添加。
	 * •无法检测到对象内部的变化，也就是只能检测 data 的属性变化，如果 data.a 
	 * 是一个对象，那么 data.a.b = 1 
	 * 这种变化是无法被检测到的。这种情况下应该创建一个新的对象并赋值给 data.a 
	 * 就行了。
	 */
	/**
	 * 异步更新机制
	 * Vue 对DOM的更新是异步的！ 
	 * 这个异步是在一个异步队列中进行的，不过这个异步队列会在当前的 Event Loop 
	 * 中执行完，所以如果修改了 Data 
	 * 立刻去DOM中做查询操作是不对的，这个时候DOM还没有更新，正确的做法是这样做：
	 */
	var vm = new Vue({
		el : '#root',
		data : {
			message : '你好啊，Ken',
		}
	})
	vm.message = 'new message' // change data
	vm.$el.textContent === 'new message' // false
	Vue.nextTick(function () {
 		vm.$el.textContent === 'new message' // true
	});

	vm.$nextTick(function () {
 		this.$el.textContent === 'new message' // true
	})
</script>

</body>
</html>